<template>
	<div>
		<el-dialog
		  title="注册"
		  :visible.sync="registerVisible"
		  width="20%"
		  center
		  :before-close="handleClose">
			  <el-form 
				:model="registerForm" 
				:rules="registerrules" 
				ref="registerForm"  
				:status-icon="true"
				>
				<el-form-item  prop="userName">
				  <el-input v-model="registerForm.userName" placeholder="请输入账号" prefix-icon="el-icon-user-solid"></el-input>
				</el-form-item>
				<el-form-item  prop="password">
				  <el-input v-model="registerForm.password" placeholder="请输入密码" prefix-icon="el-icon-view"></el-input>
				</el-form-item>
				<el-form-item  prop="passwordTwo">
				  <el-input v-model="registerForm.passwordTwo" placeholder="请再次输入密码" prefix-icon="el-icon-view"></el-input>
				</el-form-item>
				<el-form-item>
				  <el-button type="primary" @click="registerUser('registerForm')" class="fo">注册</el-button>
				</el-form-item>
			  </el-form>
		</el-dialog>
	</div>
</template>

<script>
	import loginApi from "@/api/login.js"
	export default{
		name:"register",
		props:["registerVisible"],
		data(){
			var checkUserName = (rule, value, cb) => {
			  const regUserName = /^[a-zA-Z]\w{5,17}$/;
			  if (regUserName.test(value)) {
			    return cb();
			  }
			  cb(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
			};
			
			var blurUserName = (rule, value, cb) => {
			  loginApi.findUserName({userName: value})
			  .then(res=>{
				  console.log(res)
				  if(res.data.code === "001"){
					  return cb()
				  }else{
					  cb(new Error("用户名已经存在，不能注册"));
				  }
			  })
			};
			
			var checkPassword = (rule, value, cb) => {
			  const regPassword = /^[a-zA-Z]\w{6,19}$/;
			  if (regPassword.test(value)) {
			    return cb();
			  }
			  cb(new Error("字母开头,长度6-18之间,允许字母数字下划线"));
			};
			
			var blurPassword = (rule, value, cb) => {
			  if (value === this.registerForm.password) {
			    return cb();
			  }
			  cb(new Error("两次输入密码不一致"));
			};
			
			return{
				registerForm:{
					userName:"",
					password:"",
					passwordTwo:""
				},
				registerrules:{
					userName:[
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{ validator: checkUserName, message: "字母开头,长度5-16之间,允许字母数字下划线", trigger: "blur" },
						{ validator: blurUserName, message: "用户名已经存在，不能注册", trigger: "blur" },
					],
					password:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ validator: checkPassword, message: "字母开头,长度6-18之间,允许字母数字下划线", trigger: "blur" },
					],
					passwordTwo:[
						{ required: true, message: '请输入确认密码', trigger: 'blur' },
						{ validator: blurPassword, message: "两次输入密码不一致", trigger: "blur" },
					]
				}
			}
		},
		methods:{
			registerUser(formName){
				this.$refs[formName].validate((valid) => {
				    if (valid) {
				      loginApi.register({userName: this.registerForm.userName, password: this.registerForm.password})
					  .then(res=>{
						  if(res.data.code === "001"){
							  this.$notify({
							      message: res.data.msg,
							      type: 'success'
							    });
						  }
						  this.handleClose()
					  })
				      
					} else {
				      this.$notify({
				          message: res.data.msg,
				          type: 'error'
				        });
				      return false;
				    }
				  });
			},
			handleClose(){
				this.registerForm.userName = ""
				this.registerForm.password = ""
				this.registerForm.passwordTwo = ""
				this.$emit("register")
			}
		}
	}
</script>

<style>
	.fo{
		width: 100%;
	}
</style>
